<template>
  <div class="load">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <span>努力加载中....</span>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.load {
  position: relative;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  ul {
    display: flex;
    li {
      width: 3px;
      height: 30px;
      margin: 0px 5px;
      background: red;
      animation: jump 1s linear infinite;
      &:nth-child(1) {
        animation-delay: -0.2s;
      }
      &:nth-child(2) {
        animation-delay: -0.1s;
      }
      &:nth-child(3) {
        animation-delay: 0s;
      }
      &:nth-child(4) {
        animation-delay: 0.1s;
      }
      &:nth-child(5) {
        animation-delay: 0.2s;
      }
    }
  }
  span {
    position: absolute;
    bottom: 0;
  }
}
@keyframes jump {
  0% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1.5);
  }
  100% {
    transform: scaleY(0.5);
  }
}
</style>
